<template>
  <vue-qr text="123" v-bind="props" />
</template>

<script lang="ts" setup name="proQrCode">
  import vueQr from 'vue-qr/src/packages/vue-qr.vue'
  import { callbackType, componentsType } from '~/types/qrCode'

  interface PropsType {
    // 欲编码的内容
    text?: string
    // 因为二维码生成是异步的,所以加个 id 用于排序
    qid?: string
    // 容错级别 0-3
    correctLevel?: number
    // 尺寸, 长宽一致, 包含外边距
    size?: number
    // 二维码图像的外边距, 默认 20px
    margin?: number
    // 实点的颜色
    colorDark?: string
    // 空白区的颜色
    colorLight?: string
    // 欲嵌入的背景图地址
    bgSrc?: string
    // 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
    gifBgSrc?: string
    // 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
    backgroundDimming?: string
    // 嵌入至二维码中心的 LOGO 地址
    logoSrc?: string
    // logo背景色,需要设置 logo margin
    logoBackgroundColor?: string
    // 用于计算 LOGO 大小的值, 过大将导致解码失败
    //  LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
    logoScale?: number
    //  LOGO 标识周围的空白边框, 默认为0
    logoMargin?: number
    // 标识及其边框的圆角半径, 默认为0
    logoCornerRadius?: number
    //  若设为 true, 背景图外将绘制白色边框
    whiteMargin?: boolean | string
    // 数据区域点缩小比例,默认为1
    dotScale?: number
    //  若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
    autoColor?: boolean | string
    // 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
    binarize?: boolean | string
    // 二值化处理的阈值
    binarizeThreshold?: number
    // 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
    callback?: callbackType
    // 指定是否需要自动将生成的二维码绑定到HTML上, 默认是true
    bindElement?: boolean
    // 背景色
    backgroundColor?: string
    components?: componentsType
  }
  const props = withDefaults(defineProps<PropsType>(), {
    text: 'hello',
    correctLevel: 1,
    size: 200,
    margin: 20,
    colorDark: '#000000',
    colorLight: '#FFFFFF',
    bgSrc: undefined,
    background: 'rgba(0,0,0,0)',
    backgroundDimming: 'rgba(0,0,0,0)',
    logoSrc: undefined,
    logoBackgroundColor: 'rgba(255,255,255,1)',
    gifBgSrc: undefined,
    logoScale: 0.2,
    logoMargin: 0,
    logoCornerRadius: 0,
    whiteMargin: true,
    dotScale: 1,
    autoColor: true,
    binarize: false,
    binarizeThreshold: 128,
    callback: function () {
      return undefined
    },
    bindElement: true,
    backgroundColor: '#FFFFFF',
    components: function () {
      return {
        data: {
          //  在 QR 码指定区域的块的比例
          scale: 1
        },
        timing: {
          scale: 1,
          // 控制是否在 QR 码的指定区域下绘制半透明保护器
          protectors: false
        },
        alignment: {
          scale: 1,
          protectors: false
        },
        cornerAlignment: {
          scale: 1,
          protectors: true
        }
      }
    }
  })
</script>

<style lang="less" scoped></style>
